<template>
	<!-- 设置页面容器 -->
	<view class="my-setting-page">
		<!-- 设置选项列表 -->
		<view class="setting-options-list">
			<!-- 清除缓存选项 -->
			<view class="setting-option-item" @click="handleClearCache">
				<text class="setting-option-title">清除缓存</text>
				<text class="setting-option-value">{{ cacheSize }}</text>
			</view>
			<!-- 退出登录选项 -->
			<view class="setting-option-item" @click="handleLogout">
				<text class="setting-option-title">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
	import { clearUser } from '@/stores/user';
	import { logoutAPI } from '@/services/login';
	import { getThemeStyles } from '@/stores/theme';

	/**
	 * 缓存大小显示值
	 */
	const cacheSize = ref('0MB');

	/**
	 * 获取缓存大小
	 * @description 从系统中获取当前应用的缓存大小
	 */
	const getCacheSize = async () => {
		try {
			// #ifdef APP-PLUS
			const { size } = await uni.getStorageInfoAsync();
			// 转换为MB并保留两位小数
			cacheSize.value = (size / 1024 / 1024).toFixed(2) + 'MB';
			// #endif
			// 其他平台暂不支持获取缓存大小
		} catch (error) {
			console.error('获取缓存大小失败:', error);
			cacheSize.value = '0MB';
		}
	};

	/**
	 * 清除缓存
	 * @description 清除应用的本地缓存数据
	 */
	const handleClearCache = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清除缓存吗？',
			success: (res) => {
				if (res.confirm) {
					try {
						// #ifdef APP-PLUS
						uni.clearStorageSync();
						// #endif
						// 重新获取缓存大小
						getCacheSize();
						uni.showToast({
							title: '缓存清除成功',
							icon: 'success'
						});
					} catch (error) {
						console.error('清除缓存失败:', error);
						uni.showToast({
							title: '清除缓存失败',
							icon: 'error'
						});
					}
				}
			}
		});
	};

	/**
	 * 退出登录
	 * @description 弹出确认对话框，确认后执行退出登录操作
	 */
	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 清除登录状态
					clearLoginStatus();

					uni.reLaunch({
						url: '/pages/login/index'
					});
				}
			}
		});
	};

	/**
	 * 清除登录状态
	 * @description 调用退出登录API并清除前端登录状态
	 */
	const clearLoginStatus = () => {
		// 调用退出登录接口
		logoutAPI()
			.then(() => {
				// 清除前端登录状态
				clearUser();

				uni.showToast({
					title: '退出登录成功',
					icon: 'success'
				});
			})
			.catch((error) => {
				console.error('退出登录失败:', error);
				// 即使接口失败，也清除本地状态
				clearUser();
				uni.showToast({
					title: '退出登录失败，请重新登录',
					icon: 'error'
				});
			});
	};

	// 获取主题样式
	const themeStyles = computed(() => getThemeStyles());

	/**
	 * 页面加载时执行
	 */
	onMounted(() => {
		getCacheSize();
		
		// 监听主题变化
		uni.$on('themeChange', () => {
			// 主题切换时，computed 会自动更新
		});
	});

	// 清理事件监听
	onBeforeUnmount(() => {
		uni.$off('themeChange');
	});
</script>

<style lang="scss" scoped>
	/**
	 * 设置页面容器样式
	 */
	.my-setting-page {
		min-height: 100vh;
		padding: 32rpx;
		background: v-bind('themeStyles.bgGradient');
	}

	/**
	 * 设置选项列表容器样式
	 */
	.setting-options-list {
		background: v-bind('themeStyles.bgCard');
		border-radius: 24rpx;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		border: 1px solid v-bind('themeStyles.borderLight');
		overflow: hidden;
	}

	/**
	 * 设置选项项样式
	 */
	.setting-option-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 32rpx;
		border-bottom: 1rpx solid v-bind('themeStyles.borderLight');
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		// 最后一项去除下边框
		&:last-child {
			border-bottom: none;
		}

		// 点击效果
		&:active {
			background: v-bind('themeStyles.bgSecondary');
			transform: scale(0.98);
		}
	}

	/**
	 * 设置选项标题样式
	 */
	.setting-option-title {
		font-size: 32rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
		letter-spacing: 0.5rpx;
	}

	/**
	 * 设置选项值样式
	 */
	.setting-option-value {
		font-size: 28rpx;
		color: v-bind('themeStyles.textSecondary');
	}
</style>